﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ClientListPage.aspx.cs"
    Inherits="HJT212_Protocol_WebHostClient.ClientListPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>现场机列表</title>
    <script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="Scripts/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="Scripts/jQuery.timer1.2.js"></script>
    <link rel="stylesheet" type="text/css" href="Content/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="Content/icon.css" />
    <link rel="stylesheet" type="text/css" href="Content/demo.css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" value="加载数据" onclick="GetData();" />
        <table id="test"></table>
        <script type="text/javascript">
            function GetData() {
                $('#test').datagrid({
                    title: '数采仪在线状态',
                    iconCls: 'icon-save',
                    width: 700,
                    height: 350,
                    nowrap: true,
                    striped: true,
                    collapsible: false,
                    url: 'http://192.168.10.87:8001/GetClientList.ashx?Type=ClientList',
                    sortName: 'OnLineState',
                    sortOrder: 'desc',
                    remoteSort: false,
                    singleSelect: true,
                    columns: [[
                    { field: 'MN', title: 'MN号', width: 150, align: 'center' },
                    { field: 'MCNName', title: '站点名称', width: 150 },
                    {
                        field: 'OnLineState', title: '在线状态', width: 350,
                        formatter:function(value,rec){
                            if (value == 2) {
                                return '在线';
                            }
                            else {
                                return '离线';
                            }
                        },
                        styler: function (value, row, index) {
                            if (value ==2) {
                                return 'color:red;';
                            }
                        }
                    }
                ]],
                    rowStyler:function(index,row,css){
                        if (row.OnLineState ==2) {
                            return 'background-color:#6293BB;color:#fff;font-weight:bold;';
                        }
                    },
                    pagination: true,
                    pageSize: 10,
                    pageList: [5, 10, 15, 20, 30, 50],
                    rownumbers: true,
                    pageNumber: 1
                });
            }

            $('body').everyTime('30s', function () {
                GetData();
            });
        </script>
    </div>
    </form>
</body>
</html>
